<template>
  <div class="home">
    <tagRouter></tagRouter>
    <SearchForm :queryForm="queryForm">
      <template #searcContent>
        <el-form-item label="协议ID" label-width="70">
          <el-input v-model="queryForm.user" placeholder="请输入Id" clearable />
        </el-form-item>
        <el-form-item label="协议名称" label-width="70">
          <el-input
            v-model="queryForm.user"
            placeholder="请输入名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态" label-width="70">
          <el-input
            v-model="queryForm.user"
            placeholder="请选择状态"
            clearable
          />
        </el-form-item>
        <el-form-item label="创建者" label-width="70">
          <el-input
            v-model="queryForm.region"
            placeholder="请输入版本号"
            clearable
          />
        </el-form-item>
        <el-form-item label="创建时间" label-width="70">
          <el-date-picker
            v-model="queryForm.date"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请输入时间"
            clearable
          />
        </el-form-item>
      </template>
      <template #searchBtn>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </template>
    </SearchForm>
    <bulkOperations>
      <template #operation>
        <el-button type="primary" @click="protocolAdded">新增</el-button>
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">指定当前模板</el-button>
        <el-button type="primary">刷新</el-button>
      </template>
    </bulkOperations>
    <Table :tableBind="tableBind" :tableList="tableList">
      <template #operation="scope">
        <el-text class="mx-1" type="primary" @click="edit(scope)">编辑</el-text>
        <el-text class="mx-1" type="primary" @click="del(scope)">删除</el-text>
      </template>
    </Table>
    <DrawerDialog ref="drawerDialogRef" :widthMinus="0" :dialogType="'drawer'">
      <template #drawerContent>
        <AgreementAdd @close="protocolAdded"></AgreementAdd>
      </template>
    </DrawerDialog>
    <Pagination></Pagination>
  </div>
</template>

<script setup lang="ts">
import tagRouter from "@/components/tagRouter/index.vue";
import Table from "@/components/table/index.vue";
import Pagination from "@/components/pagination/index.vue";
import SearchForm from "@/components/searchForm/index.vue";
import bulkOperations from "@/components/bulkOperations/index.vue";
import DrawerDialog from "@/components/drawerDialog/index.vue";
import AgreementAdd from "@/pages/agreement/components/agreementAdd.vue";
import { reactive, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const drawerDialogRef = ref(null);
const router = useRouter();
const tableBind: any = reactive([
  {
    label: "协议ID",
    property: "protocolId",
  },
  {
    label: "协议名称",
    property: "protocolName",
  },
  {
    label: "平台",
    property: "protocolType",
  },
  {
    label: "状态",
    property: "state",
  },
  {
    label: "创建者",
    property: "createdBy",
  },
  {
    label: "创建时间",
    property: "createTime",
  },
]);
const tableList: any = [
  {
    protocolId: "987",
    protocolName: "协议名称",
    protocolType: "H5",
    state:"用户协议",
    createdBy: "志伟",
    createTime: "2016-05-03",
  },
];
const queryForm: any = reactive({
  protocolId: "",
  protocolName: "",
  protocolType: "",
  createdBy: "",
  createTime: "",
});
// 提交搜索
const onSubmit = () => {
  console.log(queryForm, "提交");
  router.push("/user");
};
// 重置搜索项
const onReset = () => {
  console.log("重置");
};
// 编辑
const edit = (scope: any) => {
  console.log(scope);
};
// 删除
const del = (scope: any) => {
  console.log(scope.scope.row);
};
// 协议新增
const protocolAdded = () => {
  drawerDialogRef.value.showFun();
};
// 页面加载
onMounted(() => {});
</script>

<style lang="scss" scoped>
.spanColor {
}
</style>
